<!DOCTYPE html>
<html>
  <head>
    <title>CCC Samples - Real time</title>

    <meta name="svg.render.forceflash" content="true">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/jquery.js"></script>

    <script type="text/javascript" src="data/q01-01.js"></script>
    <script type="text/javascript" src="data/campaigns.js"></script>
    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/protovis.js"></script>
    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/protovis-msie.js"></script>
    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/jquery.tipsy.js"></script>
    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/tipsy.js"></script>
    <link type="text/css" href="../ccc-js/src/main/javascript/package-res/lib/tipsy.css" rel="stylesheet"/>



    <!-- @SCRIPTSBEG@ -->
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/shim.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/prologue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/object.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/info.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/bit.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/fun.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/number.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/array.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/string.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/conversion.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/predicate.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/error.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/log.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/private.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/varia.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/qualifiedName.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/namespace.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/describe.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/mixin.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/create.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/attached.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/configure.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/inherit.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/overrides.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/methods.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/MetaType.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/Object.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/type.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/enum.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/classify.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/fields.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/id.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/collection/Set.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/collection/Map.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/collection/OrderedMap.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/EventSource.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/html.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/css.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/query.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/textTable.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/math.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/epilogue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/_data.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/meta/dimensionType.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/meta/complexType.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/meta/complexTypeProject.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/atom.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/complex.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/complexView.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/datum.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/dimension.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.selected.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.operations.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data-filtered.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data-grouped.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.compat.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/abstract-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/grouping-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/groupingSpec.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/linear-interp-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/linear-interp-seriesState.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/zero-interp-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/zero-interp-seriesState.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/abstract-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/abstract-matrix-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/crosstab-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/relational-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/number-formatStyle.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/number-format.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/date-format.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/custom-format.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/formatProvider.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/format-language.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/shims.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/prologue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/extension.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/colorScheme.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/time.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/mark.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/enums.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/offset.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/percentValue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/sides.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/size.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/abstract.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/optionsMgr.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/abstract-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/abstract-interactive.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/color.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/context.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/text.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/trends.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/spec.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/slidingWindow.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/scene/scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/scene/var.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/visualRole/visualRole.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/visualRole/visualRolesBinder.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/visualRole/visualRoleVarHelper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/dataCell/dataCell.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/dataCell/color-dataCell.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/color-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/size-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/normalized-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/panel/panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/content-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/plot/plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/plot/plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/plot/plotBg-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/legend-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/legend-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-root-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-group-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-sceneSection.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-scene.selection.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-scene.visibility.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/legendSymbolRenderer.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/title/abstract-title-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/title/title-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/dockingGrid-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.visualRoles.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.data.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.plots.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.axes.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.panels.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.selection.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.extension.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.activeScene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/multi/multiChart-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/multi/multiChart-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/multi/smallChart-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/base-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/panel-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/label-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/value-label-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/dot-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/dotSizeColor-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/line-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/area-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/bar-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/rule-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/discrete-bands-layout.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/cart-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/root-cart-axis-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/tick-cart-axis-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/abstract-cart-axis-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/cart-axis-title-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-focusWindow.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/ortho-cart-dataCell.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-dockingGrid-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/categorical/categ-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/categorical/categ-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/categorical/categ-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-metricxy/abstract-metricxy-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-metricxy/abstract-metricxy-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-bar/abstract-bar-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-bar/abstract-bar-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-bar/abstract-bar-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-slice-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bar/bar-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bar/bar-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bar/bar-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/nbar/nbar-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-legend-group-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-legend-item-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/point/point-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/point/point-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/point/point-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-size-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/heatGrid/hg-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/heatGrid/hg-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/heatGrid/hg-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/box/box-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/box/box-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/box/box-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-color-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-color-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-slice-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bullet/bullet-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bullet/bullet-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/parallel/par-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/dataTree/dt-chart.js"></script>
    <!-- @SCRIPTSEND@ -->
        <link type="text/css" href="lib/codemirror/codemirror.css" rel="stylesheet"/>
        <script src="lib/codemirror/codemirror.js" type="text/javascript"></script>
        <script src="lib/codemirror/javascript.js" type="text/javascript"></script>

        <script type="text/javascript" src="pvcDocUtils.js"></script>


    <script type="text/javascript">


        function periodicRefresh(chart, count, delta, missingSeries, dataFun) {

            function refresh() {
                if(count--) {
                    chart_addData(chart, missingSeries, dataFun);
                    setTimeout(refresh, delta);
                }
            }

            setTimeout(refresh, delta);
        }

        function chart_addData(chart, missingSeries, dataFun) {

            var incData = dataFun(chart.data, missingSeries);      // @type cdo.Datum[]
            chart.setData(incData);                   // Update chart data
            chart.render({bypassAnimation: true, recreate: true, dataOnRecreate: 'add'});
        }

        function randomDataChart5(data, missingSeries) {
            var _valueAmplitude = 10;   // How much `value` can vary (+- half of this)
            var _territory = ['USA', 'Europe', 'Moon', 'RoW'];
            var _region = { 'USA'   : ['Kansas', 'New York', 'Idaho'],
                            'Europe': [ ],
                            'Moon'  : ['Big Valey'],
                            'RoW'   : ['China', 'Japan', 'India', 'S. America', 'Mexico']
                          };
            var _market = { 'Kansas'     : [ ],
                            'New York'   : ['Restaurant', 'Fair', 'House'],
                            'Idaho'      : ['Grocery', 'Fairy', 'House', 'Farm', 'Restaurant'],
                            'Big Valey'  : ['North Hole', 'South Hole'],
                            'China'      : [ ],
                            'Japan'      : [ ],
                            'India'      : [ ],
                            'S. America' : [ ],
                            'Mexico'     : [ 'Grocery' ]
                           };

            var N = _territory.length - missingSeries;    // Number of datums (rows)
            var _seriesLastValue = {};
            var T = _territory.length,
                indexesT = sampleIndexes(T, N);
            var dateText = randomDate();
            var rows = [];

            while(N--) {
                var territory = _territory[indexesT[N]];

                var R = _region[territory].length;
                    if(!R){
                        var region = null,
                            market = null;
                    } else {
                        var indexesR = sampleIndexes(R, 1),
                            region= _region[territory][indexesR[0]],
                            M = _market[region].length;

                            if(!M){
                                var market = null;
                            } else {
                                var indexesM = sampleIndexes(M, 1),
                                    market= _market[region][indexesM[0]];
                            }
                    }

                var value  = _seriesLastValue[territory] || 0;

                value += _valueAmplitude * (Math.random() - 0.5);
                _seriesLastValue[territory] = value;

                rows.push([ territory, region, market, dateText, value ]);
            }

            return {"metadata":testTreemapThreeLevel02.metadata , "resultset": rows};
        }


        function randomDataChart3(data, missingSeries) {
            var _valueAmplitude = 10;   // How much `value` can vary (+- half of this)
            var _series = ['London', 'Paris', 'Lisbon', 'Berlim', 'Madrid', 'New York', 'Porto', 'Rio de Janeiro'];
            var N = _series.length - missingSeries;    // Number of datums (rows)
            var _product = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'N'];
            var _seriesLastValue = {};
            var S = _series.length;
            var indexes = sampleIndexes(S, N);
            var dateText = randomDate();
            var rows = [];

            var P = _product.length;
            var indexesP = sampleIndexes(P, P);

            while(N--) {
                var series = _series[indexes[N]];
                var M = _product.length;
                while(M--) {
                    var product= _product[indexesP[M]],
                        value  = _seriesLastValue[series] || 0;


                    value += _valueAmplitude * (Math.random() - 0.5);
                    _seriesLastValue[series+product] = value;

                    rows.push([ series, product, dateText, value]);

                }
            }

            return {"metadata":relational_one_all_null_series_others_overlapping02.metadata , "resultset": rows};
        }

        function randomDataChart2(data, missingSeries) {
            var _valueAmplitude = 10;   // How much `value` can vary (+- half of this)
            var _series = ['London', 'Paris', 'Lisbon', 'Berlim', 'Madrid', 'New York', 'Porto', 'Rio de Janeiro'];
            var N = _series.length - missingSeries;    // Number of datums (rows)
            var _seriesLastValue = {};
            var S = _series.length;
            var indexes = sampleIndexes(S, N);
            var dateText = randomDate();
            var rows = [];


             while(N--) {
                var series = _series[indexes[N]],
                    value  = _seriesLastValue[series] || 0;

                    value  += _valueAmplitude * (Math.random() - 0.5);

                    value=Math.abs(value);

                rows.push([ series, value,  dateText ]);
            }

            return {"metadata":relational_RT_Bar.metadata , "resultset": rows};
        }

        function randomDataChart1(data, missingSeries) {
            var _valueAmplitude = 10;   // How much `value` can vary (+- half of this)
            var _series = ['London', 'Paris', 'Lisbon', 'Berlim', 'Madrid', 'New York', 'Porto', 'Rio de Janeiro'];
            var N = _series.length - missingSeries;    // Number of datums (rows)
            var _seriesLastValue = {};
            var S = _series.length;
            var indexes = sampleIndexes(S, N);
            var rows = [];
            var i = 4;
            _valueAmplitude = 50;
            while(i--){
             var dateText = randomDate();
             while(N--) {
                var series = _series[indexes[N]],
                    value  = _seriesLastValue[series] || 0;

                value += _valueAmplitude * (Math.random() - 0.5);
                _seriesLastValue[series] = value;

                rows.push([ series, dateText, value ]);
            }
            N = _series.length - missingSeries;
            }
            _valueAmplitude = 10;

            return {"metadata":relational_01_neg.metadata , "resultset": rows };
        }


        var _lastDayNumber = 28; // Last day of static data (of 2011/8)
        var _periodDays = 7;     // Number of days separating sample points

        function randomDate() {
            var dayNumber = (_lastDayNumber += _periodDays);
            var date = new Date(2011, 8, dayNumber);
            return date.getFullYear() + "-" +
                   pad2Digits(date.getMonth() + 1) + "-" +
                   pad2Digits(date.getDate());
        }

        // N indexes out of S indexes
        function sampleIndexes(S, N) {
            var indexes = pv.range(S);
            if(N == null) return indexes;
            if(N > S) N = S;

            var out = [];
            while(N--) {
                var j = Math.floor(Math.random() * indexes.length);
                var i = indexes.splice(j, 1)[0];
                out.push(i);
            }
            return out;
        }

        function pad2Digits(v) {
            return v < 10 ? ('0' + v) : v;
        }

    </script>
  </head>
  <body>

    <h1>
      Line Chart
    </h1>
Line charts are often used to visualize time series data.

<h2>Chart Options</h2>
<h4>Dimensions</h4>
<ul>
  <li>width</li>
  <li>height</li>
  <li>margins -
      css-like margins shorthand syntax (without units) or object with properties 'all', 'top', 'bottom', 'left' and/or 'right'.
      Margins consume the chart's width and height (inside margins).
  </li>
</ul>
<h4>Title properties</h4>
<ul>
  <li>title</li>
  <li>titlePosition</li>
  <li>titleSize</li>
</ul>
<h4>Lifecycle</h4>
<ul>
  <li>renderCallback - executed immediatly before render is called</li>
</ul>
<h4>Legend properties</h4>
<ul>
  <li>legend (true|false)</li>
  <li>legendPosition (right, top, bottom, left)</li>
  <li>legendAlign (right, left, center, top, middle, bottom)</li>
  <li>legendSize</li>

  <li>legendDrawLine (true|false)</li>
  <li>legendDrawMarker (true|false)</li>
  <li>tooltipEnabled (true|false)</li>
</ul>
<h4>Data properties</h4>
<ul>
  <li>timeSeries (true| false)</li>
  <li>timeSeriesFormat. For example: "%Y-%m-%d"</li>
</ul>
<h4>Axis properties</h4>
<ul>
  <li>show{X,Y}Scale (true | false) - whether to show an axis. Default: true</li>
  <li>xAxisPosition (bottom | top) - the position of the X axis. Default: bottom</li>
  <li>yAxisPosition (left | right) - the position of the Y axis. Default: left</li>
  <li>{x,y}AxisSize - the size of <i>free dimension</i> of an axis (X: height, Y: width). Default: 30</li>
  <li>{x,y}AxisGrid (true | false) - show lines on all (major) ticks, except the first and the last. Default: false</li>
  <li>{x,y}AxisEndLine (true | false) - show a line on the last (major) tick. Default: false</li>
  <li>{x,y}AxisTitle - The axis title text. Default: null</li>
  <li>{x,y}AxisTitleFont - The axis title font. Default: '10px sans-serif'</li>
  <li>{x,y}AxisTitleSize - The size of the axis title.
      The size is the width when the axis is vertical and the height when it is horizontal.
      The title consumes space from the specified {x|y}AxisSize.
      Default: The required by the font height plus a proportional margin.</li>
  <li>{x,y}AxisDomainRoundMode (none | nice | tick) - rounding mode of the domain bounds of a linear scale axis. Default: none</li>
  <li>{x,y}AxisDomainAlign (min | center | max) Default: center</li>
  <li>{x,y}AxisDesiredTickCount - desired number of (major) ticks of a linear scale axis. Default: 5</li>
  <li>{x,y}AxisMinorTicks (true|false) - show minor ticks on a linear scale axis. Default: true</li>
  <li>{x,y}AxisFixedMin </li>
  <li>{x,y}AxisFixedMinMax </li>
  <li>{x,y}AxisFixedLength </li>
  <li>{x,y}AxisRatio </li>
  <li>{x,y}AxisPreserveRatio (true|false). Default: false</li>
  <li>{x,y}AxisMinorTicks (true|false) - show minor ticks on a linear scale axis. Default: true</li>
  <li>{x,y}AxisMinorTicks (true|false) - show minor ticks on a linear scale axis. Default: true</li>
  <li>colorAxisPreserveMap (true|false). Default: false</li>
</ul>
<h4>Sliding Window properties</h4>
<ul>
  <li>slidingWindowLength </li>
  <li>slidingWindowDimension </li>
  <li>slidingWindowScore </li>
  <li>slidingWindowSelect </li>
</ul>


<h2>Examples</h2>


<h3>A Real Time Heat Grid</h3>
<textarea cols="55" rows="15" id="pvcLine3Code">

function chartExample3() {

    return new pvc.HeatGridChart({
        canvas: "pvcLine3",
        width:  520,
        height: 300,

        title:  "Heat grid with sliding window",

        selectable:  true,
        ignoreNulls: false,
        //axisComposite: true,
        readers: 'city, product, date, profit',
        dimensions: {
                date: {
                    valueType :  Date       ,
                    rawFormat : "%Y-%m-%d"  ,
                    format    : "%m/%d"
                    }
                },
        visualRoles: {
            category: 'city',
            value: 'profit',
            series: 'product',
            color: 'profit'
        },

        //real time - sliding window
        slidingWindow:true,
        slidingWindowLength:'6w',
        slidingWindowDimension:'date',

        orientation: "horizontal",
        valuesVisible: false,
        extensionPoints: {
            panel_lineWidth: 1,
            panel_strokeStyle: 'black'
        }
    })
    .setData(relational_one_all_null_series_others_overlapping02,
    {
        crosstabMode: false,
        seriesInRows: false
    })
    .render();
}

var chart3 = chartExample3();
periodicRefresh(chart3, /*_count*/ 8, /*_delta*/ 300, /*_seriesMissing*/ 0, randomDataChart3);

</textarea>
        <button class="tryMe" onclick='tryMe(this)'>Try me</button>
        <div id="pvcLine3"></div>

<h3>A Real Time Pie Chart</h3>
<textarea cols="55" rows="15" id="pvcLine4Code">

function chartExample4() {

   return new pvc.PieChart({
        canvas: "pvcLine4",
        width: 520,
        height: 300,
        title: "Donut chart with sliding window",
        titlePosition: "top",
        legend: true,
        tooltipEnabled: true,
        valuesVisible: true,
        selectable: true,
        hoverable:  true,
        animate: false,
        readers: 'city, profit, date',
        dimensions: {
            date:  {  valueType :  Date       ,
                      rawFormat : "%Y-%m-%d"  ,
                      format    : "%m/%d"
                    }
        },
        visualRoles: {
            value:    'profit',
            category: 'city',
        },
        extensionPoints: {
            //slice_innerRadius: 30,
            slice_innerRadiusEx: '40%',
            titleLabel_font: "18px sans-serif"
        },

        //real time - sliding window
        slidingWindow:true,
        slidingWindowLength:'6w',
        slidingWindowDimension:'date',

        crosstabMode: false,
        seriesInRows: false
    })
    .setData($.extend(true, {},relational_RT_Bar))
    .render();

}

 var chart4 = chartExample4();
 periodicRefresh(chart4, /*_count*/ 8, /*_delta*/ 300, /*_seriesMissing*/ 0, randomDataChart2);


</textarea>
        <button class="tryMe" onclick='tryMe(this)'>Try me</button>
        <div id="pvcLine4"></div>


<h3>A Real Time TreeMap</h3>
<textarea cols="55" rows="15" id="pvcLine5Code">

function chartExample5() {

    return new pvc.TreemapChart({
        canvas:     'pvcLine5',
        width:      520,
        height:     300,

        title:      "Three-Level Treemap",
        titleFont:  'italic 14px sans-serif',
        selectable: true,
        hoverable:  true,

        legend:     true,
        legendPosition: 'right',

        rootCategoryLabel: "",

        readers: 'territory, region, market, date, sales',

        visualRoles:{
            'category'  : 'territory, region, market',
            'size'     : 'sales',
            'series'    : 'date'
        },
        dimensions:{
            date:{
                valueType :  Date       ,
                rawFormat : "%Y-%m-%d"  ,
                format    : "%m/%d"
            }
        },

        //legendSizeMax: '15%',
        legend: {
            scenes: {
                item: {
                    labelText: function() {
                        var indent = "";
                        var group  = this.group;
                        if(group) {
                            var depth = group.depth;
                            // 0 ""
                            // 1 "text"
                            // 2 "└ text"
                            // 3 "  └ text"
                            switch(depth) {
                                case 0: return "";
                                case 1: break;
                                case 2: indent = "└ "; break;
                                default:
                                    indent = new Array(2*(depth-2) + 1).join(" ") + "└ ";
                            }
                        }
                        return indent + this.base();
                    }
                }
            }
        },

        colorAxisMap: {
            //' '              :  'green' ,
            //'USA'            :  'brown'   ,
            //'USA~Idaho'      :  'orange'   ,
            //'USA~NewYork'    :  'brown'   ,
            //'USA~Kansas'     :  'pink'   ,
            //'Moon'           :  'green'    ,
            //'Moon~Big Valey' :  'green'    ,
            //'RoW'            :  'green'  ,
            //'RoW~China'      :  'green'  ,
            //'RoW~Japan'      :  'grey'  ,
            //'RoW~S. America' :  'pink'  ,
            //'RoW~India'      :  'purple'  ,
            //'RoW~Mexico'     :  'orange'
        },

        //real time - sliding window
        slidingWindow:true,
        slidingWindowLength:'6w',
        slidingWindowDimension:'date',

    })
    .setData(testTreemapThreeLevel02, {crosstabMode: false})
    .render();

}

var chart5 = chartExample5();

periodicRefresh(chart5, /*_count*/ 8, /*_delta*/ 300, /*_seriesMissing*/ 0, randomDataChart5);



</textarea>
        <button class="tryMe" onclick='tryMe(this)'>Try me</button>
        <div id="pvcLine5"></div>




  </body>
</html>
